<template>
  <div class="Register" style='background-color: #fff;height:525px'>
    <Row>
      <!-- 标题 -->
      <Col span="24" class="titleset">
      <Divider>
        <h1>帐号注册</h1>
      </Divider>
      </Col>
      <!-- 进度条 -->
      <Col span="24" class="stepset">

      <Steps :current="current">
        <Step title="邮箱注册"></Step>
        <Step title="填写个人信息"></Step>
        <Step title="注册成功"></Step>
      </Steps>
      </Col>

      <!-- 步骤 1 的界面 -->
      <template v-if="current==0">
        <Col span="24" class="inputset">
        <Input prefix="ios-at-outline" placeholder="输入邮箱" style="width: 210px" size="large" type="email" v-model="email" />
        </Col>
        <!-- 判断是否发送了验证码 ,发送了则弹出输入验证码的输入框-->
        <transition name="emailCode" mode="out-in">
          <div v-if="!sendMail" key="first">
            <Col span="24" class="colbtnset">
            <Button type="primary" @click="btnActionsMail" long style="width: 210px">发送验证码</Button>
            </Col>
          </div>
          <div v-else key="later">
            <Col span="24" class="inputset">
            <Input prefix="ios-key" placeholder="输入验证码" style="width: 210px" size="large" v-model="vertify" />
            </Col>
            <Col span="24" class="colbtnset">
            <!-- 10s 内不能再次发送 -->
            <template v-if="!timeAble">
              <Button type="primary" disabled long style="width: 210px">{{time}}s后重新发送验证码</Button>
            </template>
            <template v-else>
              <Button type="primary" @click="btnActionsMail" long style="width: 210px">重新发送验证码</Button>
            </template>
            </Col>
            <Col span="24" class="colbtnset">
            <Button style="width: 210px" type="primary" long @click="btnActionsVertify">下一步</Button>
            </Col>
          </div>
        </transition>
      </template>

      <!-- 步骤 2 的界面 -->
      <template v-if="current==1">
        <Col span="24" class="inputset">
        <Input prefix="ios-contact" placeholder="输入用户名" style="width: 210px" size="large" v-model="username" />
        </Col>
        <Col span="24" class="inputset">
        <Input prefix="ios-medical" placeholder="输入密码" style="width: 210px" size="large" type="password" v-model="password" />
        </Col>
        <Col span="24" class="colbtnset">
        <Button style="width: 210px" type="primary" @click="btnActionsUpload" long>下一步</Button>
        </Col>
      </template>

      <!-- 步骤 3 的页面 -->
      <template v-if="current==2">
        <Col span="24" class="cardSet">
        <Card style="width:320px">
          <div style="text-align:center">
            <h3 @click="btnActionLogin">账户注册成功,点击跳转回主页</h3>
          </div>
        </Card>
        </Col>
      </template>
    </Row>
  </div>
</template>


<script>
  export default {
    data() {
      return {
        current: 0, //当前进度条的完成度
        email: "", //存放输入的邮箱
        vertify: "", //存放输入的验证码
        username: "", //存放输入的用户名
        password: "", //存放输入的密码
        sendMail: false, //是否发送了邮件
        url: {
          userregister: this.$Global.url.userregister, //注册用户
          checkMail: this.$Global.url.checkMail, //检查邮箱存在API
          emailCode: this.$Global.url.emailCode, //发送和检查验证码API
          login: this.$Global.url.login //登录用户
        },
        time: "", //设定时间再次发送邮件
        timeAble: "" //时间到了，按钮可以点击
      };
    },
    methods: {
      //*************************************************页面切换********************************************
      /**
       * 进入下一步，若不存在，则不能点
       */
      next() {
        this.current += 1;
      },
      //******************************************************邮箱*****************************************
      /**
       * 验证邮箱是否存在，若不存在发送验证码
       */
      btnActionsMail() {
        if (this.email === '') {
          this.$Message.warning("邮箱不能为空");
          return;
        }
        this.sendMail = true;
        this.timeAble = false;
        this.time = 60;
        this.$http
          .get(this.url.checkMail, { params: { email: this.email } })
          .then(res => {
            if (res.status == 200) {
              // this.emailexist = res.data.exist;
              var exist = res.data.exist;
              if (exist) {
                this.$Message.warning("邮箱已存在，请更换后再尝试");
                this.countTime();
              } else {
                // this.$Message.success("验证码已经发送");
                // this.sendMail = true;
                //  this.$Message.success('666');
                // this.$Message.success('555');

                this.emailCode();

              }
            }
          })
          .catch(error => console.log(error));
      },
      /**
       * 向邮箱发送验证码
       */
      emailCode() {
        this.countTime();
        this.$Loading.start();
        this.$http
          .get(this.url.emailCode, { params: { email: this.email } })
          .then(res => {
            if (res.status == 200) {
              this.$Message.info(res.data.message);
              this.$Loading.finish();
              // this.$Message.success('555');
              // this.countTime();
            }
          })
          .catch(error => {
            this.$Loading.error();
            console.log(error);
          });
      },

      /**
       * 先进行邮箱验证码验证，验证成功进入下一步，
       */
      btnActionsVertify() {
        this.$Loading.start();
        var reg = /^[0-9]{6}$/
        if (!reg.test(this.vertify)) {
          this.$Message.warning("请输入 6 位验证码");
          return;
        }
        this.$http
          .post(this.url.emailCode, {
            email: this.email,
            code: this.vertify
          })
          .then(res => {
            if (res.status == 200) {
              // this.next();
              // this.$Message.success(res.data.message);

              if (res.data.success) {
                this.$Message.success(res.data.message);
                this.$Loading.finish();
                this.next();
              } else {
                this.$Message.warning(res.data.message);
                this.$Loading.error();
              }
            }
          })
          .catch(error => {
            this.$Loading.error();
            console.log(error);
          });
      },

      /**
       * 上传注册信息，完成注册
       */

      btnActionsUpload() {
        this.$Loading.start();
        this.$http
          .post(this.url.userregister, {
            email: this.email,
            username: this.username,
            password: this.password
          })
          .then(res => {
            if (res.status == 200) {
              this.next();
              console.log(res);
              this.$Loading.finish();
              this.$Message.success(res.data.message);
            }
          })
          .catch(error => {
            this.$Loading.error();
            console.log(error);
          });
      },

      /**
       * 注册完成，跳转回已经登录的界面   
       */
      btnActionLogin() {
        this.$Loading.start();
        this.$http
          .post(this.url.login, {
            email: this.email,
            password: this.password
          })
          .then(res => {
            if (res.status == 200) {
              var success = res.data.success;
              if (success) {
                this.$Message.success(res.data.message);
                var token = res.data.account.token;
                var name = res.data.account.name;
                this.$store.commit("login", token);
                this.$store.commit("userName", name);
                this.$Loading.finish();
                this.$router.push({ name: "home" });
              }
              else {
                console.log("error");
                this.$Message.error(res.data.message);
              }
            }
          })
          .catch(error => {
            this.$Loading.error();
            console.log(error);
          });
      },

      /**
       * 计算时间，开启重新发送邮件
       */
      countTime() {
        let clock = window.setInterval(() => {
          if (this.time > 0) {
            this.time--;
          } else {
            return (this.timeAble = true);
          }
        }, 1000);
      }
    },

    created() {
      /**
       * 开发模式下，拼接地址，形成完整的API接口
       */
      if (process.env.NODE_ENV === "development") {
        this.url.checkMail =
          this.$Global.url.baseUrl + this.$Global.url.checkMail;
        this.url.emailCode =
          this.$Global.url.baseUrl + this.$Global.url.emailCode;
        this.url.userregister =
          this.$Global.url.baseUrl + this.$Global.url.userregister;
        this.url.login = this.$Global.url.baseUrl + this.$Global.url.login;
      }
    }
  };
</script>

<style>
  .titleset {
    margin-top: 50px;
  }

  .stepset {
    margin-top: 50px;
    margin-bottom: 50px;
    margin-left: 115px;

  }

  .colbtnset {
    /* margin-top: 20px; */
    margin-bottom: 20px;
    margin-left: 465px;
  }

  .inputset {
    margin-bottom: 20px;
    margin-left: 465px;
  }

  .cardSet {
    margin-bottom: 20px;
    margin-left: 410px;

  }

  .emailCode-enter-active {
    transition: all .7s ease;
  }

  .emailCode-leave-active {
    transition: all .5s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }

  .emailCode-enter,
  .emailCode-leave-to
  /* .slide-fade-leave-active for below version 2.1.8 */

    {
    transform: translateX(10px);
    opacity: 0;
  }
</style>